<template>
  <div>
    <!-- 维护、查看值班表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-tabs type="border-card">
        <el-tab-pane v-for="item in firstLvGroupList">
          <span slot="label">
            {{item}}
            <el-badge :value="firstLvPersonCount.hasOwnProperty(item) ? firstLvPersonCount[item] : 0" class="mark"></el-badge>
          </span>
          <el-tabs tab-position="left" style="height: 90%;">
            <el-tab-pane v-for="item1 in secondLvGroupList[item]" >
            <span slot="label">
              {{item1.name}}
<!--              <el-badge :value="dutyListMap.hasOwnProperty(item1.pkId) ? (dutyListMap[item1.pkId]).length : 0" class="mark"></el-badge>-->
              <el-badge :value="secondLvPersonCount.hasOwnProperty(item1.pkId) ? secondLvPersonCount[item1.pkId] : 0" class="mark"></el-badge>
            </span>
              <el-row :gutter="10" class="mb8" v-if="!readOnly">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd(item, item1.name, item1.pkId)"
                  >新增</el-button>
                </el-col>
              </el-row>
              <el-table
                :data="dutyListMap.hasOwnProperty(item1.pkId) ? dutyListMap[item1.pkId] : []"
                style="width: 100%">
                <el-table-column width="200px"
                  label="研发">
                  <template slot-scope="scope">
                    {{formatDutyUser(scope.row.devUser)}}{{formatDutyType(scope.row.devDutyType)}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="手机号">
                  <template slot-scope="scope">
                    {{formatDutyPhonenumber(scope.row.devUser)}}
                  </template>
                </el-table-column>
                <el-table-column width="200px"
                  label="测试">
                  <template slot-scope="scope">
                    {{formatDutyUser(scope.row.testUser)}}{{formatDutyType(scope.row.testDutyType)}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="手机号">
                  <template slot-scope="scope">
                    {{formatDutyPhonenumber(scope.row.testUser)}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="!readOnly">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleUpdate(item, item1.name, scope.$index, scope.row)"
                    >修改</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

    <!-- 新增或修改人员对话框 -->
    <el-dialog :title="addTitle" :visible.sync="addOpen" width="500px" append-to-body>
      <el-form :model="form" label-width="120px">
        <el-form-item label="研发" prop="devUserId">
          <el-select v-model="form.devUserId" filterable placeholder="请选择研发人员" @change="onSelectDevUser">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName + '（' + item.userName + '）'"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="devUserPhonenumber" placeholder="选择研发人员自动带出" readonly />
        </el-form-item>
        <el-form-item label="研发值班类型" prop="devDutyType" v-show="showDevDutyType">
          <el-select v-model="form.devDutyType" placeholder="请选择值班类型">
            <el-option
              v-for="dict in dict.type.yjcz_duty_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测试" prop="testUserId">
          <el-select v-model="form.testUserId" filterable placeholder="请选择测试人员" @change="onSelectTestUser">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName + '（' + item.userName + '）'"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="testUserPhonenumber" placeholder="选择测试人员自动带出" readonly />
        </el-form-item>
        <el-form-item label="测试值班类型" prop="testDutyType" v-show="showTestDutyType">
          <el-select v-model="form.testDutyType" placeholder="请选择值班类型">
            <el-option
              v-for="dict in dict.type.yjcz_duty_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>


import {getPersonListByFbId, listUser} from "@/api/yjcz/dutyPerson";
import DutyPerson from "@/layout/mixin/DutyPerson";
import {addFbDuty, delFbDuty, updateFbDuty} from "@/api/yjcz/fbDuty";

export default {
  name: "pcDutyPersonDialog",
  mixins: [DutyPerson],
  data() {
    return {
      open: false,
      title: '',
      readOnly: true,
      addTitle: '新增人员',
      addOpen: false,
      form: {},
      devUserPhonenumber: '',
      testUserPhonenumber: '',
      currEditPersonIdx: -1,
      showDevDutyType: false,
      showTestDutyType: false
    }
  },
  methods: {
    show (fbId, fbName, readOnly) {
      this.form.fbId = fbId
      this.readOnly = readOnly
      this.title = readOnly ? `查看${fbName}值班表` : `维护${fbName}值班表`
      this.open = true
      getPersonListByFbId(fbId).then(res => {
        if (res.code === 200) {
          let data = res.data
          this.parseDataList(data)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onSelectDevUser (val) {
      if (!val) {
        this.devUserPhonenumber = ''
        this.form.devUser = null
        this.form.devDutyType = null
        this.showDevDutyType = false
      } else {
        let devUser = this.userList.filter(item => item.userId === val)[0]
        this.form.devUser = devUser
        this.devUserPhonenumber = devUser.phonenumber
        this.showDevDutyType = true
        if (this.form.devDutyType == null) {
          this.form.devDutyType = parseInt((this.dict.type.yjcz_duty_type)[0].value)
        }
      }
      this.form = JSON.parse(JSON.stringify(this.form))
    },
    onSelectTestUser (val) {
      if (!val) {
        this.testUserPhonenumber = ''
        this.form.testUser = null
        this.form.testDutyType = null
        this.showTestDutyType = false
      } else {
        let testUser = this.userList.filter(item => item.userId === val)[0]
        this.form.testUser = testUser
        this.testUserPhonenumber = testUser.phonenumber
        this.showTestDutyType = true
        if (this.form.testDutyType == null) {
          this.form.testDutyType = parseInt((this.dict.type.yjcz_duty_type)[0].value)
        }
      }
      this.form = JSON.parse(JSON.stringify(this.form))
    },
    handleAdd (firstName, secondName, dutyPersonId) {
      this.getUserList()
      Object.assign(this.form, {
        pkId: null,
        dutyPersonId: dutyPersonId,
        devUserId: '',
        testUserId: '',
        devUser: null,
        testUser: null,
        devDutyType: null,
        testDutyType: null
      })
      this.showDevDutyType = this.showTestDutyType = false
      this.devUserPhonenumber = ''
      this.testUserPhonenumber = ''
      this.addTitle = `新增【${firstName}-${secondName}】值班人员信息`
      this.addOpen = true
    },
    handleUpdate (firstName, secondName, index, row) {
      this.getUserList()
      this.currEditPersonIdx = index
      this.form = JSON.parse(JSON.stringify(row))
      this.hideOrShowDutyType()
      let devUser = this.form.devUser
      let testUser = this.form.testUser
      this.devUserPhonenumber = null == devUser ? '' : devUser.phonenumber
      this.testUserPhonenumber = null == testUser ? '' : testUser.phonenumber
      this.addTitle = `修改【${firstName}-${secondName}】值班人员信息`
      this.addOpen = true
    },
    hideOrShowDutyType () {
      this.showDevDutyType = this.form.devUserId ? true : false
      this.showTestDutyType = this.form.testUserId ? true : false
      let defaultValue = parseInt((this.dict.type.yjcz_duty_type)[0].value)
      if (this.showDevDutyType && null == this.form.devDutyType) {
        this.form.devDutyType = defaultValue
      }
      if (this.showTestDutyType && null == this.form.testDutyType) {
        this.form.testDutyType = defaultValue
      }
      this.form = JSON.parse(JSON.stringify(this.form))
    },
    handleDelete (index, row) {
      let pkId = row.pkId
      this.$modal.confirm('是否确认删除值班人员？').then(function() {
        return delFbDuty(pkId);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        let dutyList = this.dutyListMap[row.dutyPersonId]
        dutyList.splice(index, 1)
        this.dutyListMap[row.dutyPersonId] = JSON.parse(JSON.stringify(dutyList))
      }).catch(() => {});
    },
    submitForm () {
      let devUserId = this.form.devUserId
      let testUserId = this.form.testUserId
      if (!devUserId && !testUserId) {
        this.$message.error("研发测试人员请至少选择一个");
        return
      }
      let dutyList = this.dutyListMap[this.form.dutyPersonId]
      if (!this.form.pkId) {
        addFbDuty(this.form).then(response => {
          if (response.code === 200) {
            this.form.pkId = response.data
            if (!dutyList) {
              dutyList = this.dutyListMap[this.form.dutyPersonId] = []
            }
            dutyList.push(this.form)
            this.dutyListMap[this.form.dutyPersonId] = JSON.parse(JSON.stringify(dutyList))
            this.addOpen = false
          } else {
            this.$message.error(response.msg);
          }
        })
      } else {
        updateFbDuty(this.form).then(response => {
          if (response.code === 200) {
            dutyList[this.currEditPersonIdx] = this.form
            this.dutyListMap[this.form.dutyPersonId] = JSON.parse(JSON.stringify(dutyList))
            this.addOpen = false
          } else {
            this.$message.error(response.msg);
          }
        })
      }
    },
    cancel () {
      this.addOpen = false
    }
  }
}
</script>

<style scoped>
>>> .el-input.is-disabled .el-input__inner {
  background-color: white;
}
>>> .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
}
>>> .el-input--medium .el-input__inner {
  width: 300px;
}
</style>
